<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        html,body,.page{
            height: 100%;
        }

        .page{
            display: none;
        }

        .login{
            background-color: red;
        }

        .index{
            background-color:green;
        }

        .detail{
            background-color: blue;
        }

        .nav{
            list-style: none;
            padding-left: -20px;
        }

        .nav li{
            float: left;
        }

    </style>
</head>

<body>

    <ul class="nav">
        <li><a href="#/index">首页</a></li>        
        <li><a href="#/login">登录页</a></li>
        <li><a href="#/detail">详情页</a></li>
    </ul>

    <div class="page login">登录页</div>
    <div class="page index">首页</div>
    <div class="page detail">详情页</div>

    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script>


        //1. hash值的改变不会刷新页面
        //2. 要知道如何获取hash值 location.hash
        //3. 要知道如何监听hash值的改变  window.onhashchange

        //哈希值一改变，这个事件就会被触发
        window.onhashchange = function(){
            // alert(location.hash);
            //根据用户访问的hash值，改变页面上展示的内容

            changePageAccordingHash();
        }

        function changePageAccordingHash(){
             //根据用户访问的hash值，改变页面上展示的内容

            //排他
            $('.page').hide();

            //展示hash对应的内容
            $("." + location.hash.slice(2)).show();
        }

        changePageAccordingHash();
    </script>
</body>

</html>